<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头构建器测试</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
    <canvas id="renderCanvas" style="width: 100%; height: 100%; touch-action: none;"></canvas>
    <script>
        // 创建箭头构建器类
        class ArrowBuilder {
            static build(direction, x, y, w, h) {
                let points = [];
                let rotation = 0;
                const upperCase = direction.toUpperCase();
                
                switch (upperCase) {
                    case 'N':
                    case 'S':
                    case 'W':
                    case 'E':
                        points = [
                            { x: x, y: y - h * 0.5 },
                            { x: x + w * 0.3, y: y - h * 0.5 },
                            { x: x + w * 0.3, y: y },
                            { x: x + w * 0.5, y: y },
                            { x: x, y: y + h * 0.5 },
                            { x: x - w * 0.5, y: y },
                            { x: x - w * 0.3, y: y },
                            { x: x - w * 0.3, y: y - h * 0.5 },
                            { x: x, y: y - h * 0.5 },
                        ];
                        rotation = upperCase === 'E' ? Math.PI / 2 : 
                                  upperCase === 'S' ? Math.PI : 
                                  upperCase === 'W' ? Math.PI * 1.5 : 0;
                        break;
                        
                    case 'NS':
                    case 'SN':
                    case 'WE':
                    case 'EW':
                        points = [
                            { x: x, y: y - h * 0.5 },
                            { x: x + w * 0.5, y: y - h * 0.5 * 0.5 },
                            { x: x + w * 0.3, y: y - h * 0.5 * 0.5 },
                            { x: x + w * 0.3, y: y + h * 0.5 * 0.5 },
                            { x: x + w * 0.5, y: y + h * 0.5 * 0.5 },
                            { x: x, y: y + h * 0.5 },

                            { x: x - w * 0.5, y: y + h * 0.5 * 0.5 },
                            { x: x - w * 0.3, y: y + h * 0.5 * 0.5 },
                            { x: x - w * 0.3, y: y - h * 0.5 * 0.5 },
                            { x: x - w * 0.5, y: y - h * 0.5 * 0.5 },
                            { x: x, y: y - h * 0.5 },
                        ];
                        rotation = upperCase === 'WE' || upperCase === 'EW' ? Math.PI / 2 : 0;
                        break;
                        
                    case 'EN':
                    case 'NE':
                    case 'WN':
                    case 'NW':
                    case 'ES':
                    case 'SE':
                    case 'WS':
                    case 'SW':
                        // L型箭头的新点集定义
                        points = [
                            { x: x, y: y - h * 0.5 },
                            { x: x + w * 0.3, y: y - h * 0.5 },
                            { x: x + w * 0.3, y: y },
                            { x: x + w * 0.5, y: y },
                            { x: x, y: y + h * 0.5 },
                            { x: x - w * 0.5, y: y },
                            { x: x - w * 0.3, y: y },
                            { x: x - w * 0.3, y: y - h * 0.5 },
                            { x: x, y: y - h * 0.5 },
                        ];
                        
                        // 根据方向调整旋转角度
                        rotation =
                            upperCase === 'EN' ? Math.PI / 2 :
                            upperCase === 'NE' ? 0 :
                            upperCase === 'ES' ? Math.PI :
                            upperCase === 'SE' ? Math.PI * 1.5 :
                            upperCase === 'WN' ? Math.PI * 1.5 :
                            upperCase === 'NW' ? Math.PI / 2 :
                            upperCase === 'WS' ? Math.PI / 2 :
                            upperCase === 'SW' ? Math.PI : 0;
                        break;
                        
                    default:
                        return undefined;
                }

                const arrow = new BABYLON.GUI.MultiLine();
                arrow.add(...points);
                arrow.rotation = rotation;
                return arrow;
            }
        }

        // 创建场景和UI
        const canvas = document.getElementById('renderCanvas');
        const engine = new BABYLON.Engine(canvas, true);
        
        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); // 透明背景
            
            // 创建相机
            const camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -10));
            camera.attachControl(canvas, true);
            
            // 创建UI
            const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
            
            // 获取画布尺寸
            const getCanvasSize = () => {
                return {
                    width: canvas.clientWidth,
                    height: canvas.clientHeight
                };
            };
            
            // 创建测试按钮
            const createButton = (text, onClick) => {
                const button = BABYLON.GUI.Button.CreateSimpleButton(text, text);
                button.width = "120px";
                button.height = "40px";
                button.color = "white";
                button.background = "blue";
                button.onPointerUpObservable.add(onClick);
                return button;
            };
            
            // 按钮面板
            const panel = new BABYLON.GUI.StackPanel();
            panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
            panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
            panel.paddingLeft = "10px";
            panel.spacing = 10;
            advancedTexture.addControl(panel);
            
			const rect = new BABYLON.GUI.Rectangle();
			rect.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
			rect.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
			rect.thinkness=1;
			rect.color='green';
			rect.left=50;
			rect.top=50;
			rect.width=50+'px';
			rect.height=50+'px';
			advancedTexture.addControl(rect);
			
            // 添加测试按钮
            const directions = ['N', 'S', 'E', 'W', 'NS', 'WE', 'EN', 'NE', 'ES', 'SE', 'WN', 'NW', 'WS', 'SW'];
            directions.forEach(direction => {
                const button = createButton(direction, () => {
                    // 清除之前的箭头
					rect.clearControls();
                    advancedTexture.addControl(panel);
                    
                    // 获取画布尺寸
					var x = rect.leftInPixels +rect.widthInPixels / 2;
					var y = rect.topInPixels +rect.heightInPixels / 2;
					var w = rect.widthInPixels - 2;
                    
                    // 创建新箭头（使用画布中心作为参考点）
                    const arrow = ArrowBuilder.build(direction, x, y, w, w);
                    if (arrow) {
                        arrow.color = "red";
                        arrow.thickness = 3;
                        // 不要设置alignment属性，保持绝对定位
                        rect.addControl(arrow);
                        
                        // 添加方向标签
                        const label = new BABYLON.GUI.TextBlock();
                        label.text = direction;
                        label.color = "blue";
                        label.fontSize = 24;
                        label.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
                        label.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                        label.paddingTop = "20px";
                        rect.addControl(label);
                    }
                });
                panel.addControl(button);
            });
            
            return scene;
        };
        
        const scene = createScene();
        
        engine.runRenderLoop(function() {
            scene.render();
        });
        
        window.addEventListener('resize', function() {
            engine.resize();
        });
    </script>
</body>
</html>